<template>
  <div id="ordermanager">
    <el-row type="flex" align="middle"  justify="center" class="row-bg" style="height: 70px">
      <el-form :model="check" :rules="rules" :inline="true"  ref="check" status-icon class="demo-form-inline" label-position="left" size="small">
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="check.goodName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单编号" prop="orderNum">
          <el-input v-model="check.orderNum" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="顾客账号" prop="account">
          <el-input v-model="check.account" placeholder="请输入具体顾客账号"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderState">
          <el-select v-model="check.orderState" clearable  placeholder="请选择" @change="queryOrders" @clear="queryOrders">
            <el-option
                key="1"
                label="待支付"
                value="1">
            </el-option>
            <el-option
                key="2"
                label="待发货"
                value="2">
            </el-option>
            <el-option
                key="3"
                label="已发货"
                value="3">
            </el-option>
            <el-option
                key="4"
                label="已完成"
                value="4">
            </el-option>
            <el-option
                key="5"
                label="售后处理中"
                value="5">
            </el-option>
            <el-option
                key="6"
                label="售后已完成"
                value="6">
            </el-option>
            <el-option
                key="7"
                label="已取消"
                value="7">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryOrders">查询</el-button>
          <el-button type="primary" @click="doReset('check')">重置</el-button>
          <el-button type="primary" @click="batchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="pageOrderData.list"
              height="80vh"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                :selectable="selectEnable"
                disabled="true"
                width="30">
            </el-table-column>
            <el-table-column
                prop="id"
                v-if="false">
            </el-table-column>
            <el-table-column
                label="序号"
                width="50">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column
                prop="orderNum"
                label="订单编号"
                width="80">
            </el-table-column>
            <el-table-column
                label="商品主图"
                width="115">
              <template slot-scope="scope">
                <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.goodImg"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                prop="goodName"
                label="商品名称"
                width="100">
            </el-table-column>
            <el-table-column
                prop="goodPrice"
                label="商品原价（元）"
                width="80">
            </el-table-column>
            <el-table-column
                prop="discount"
                label="优惠价格（元）"
                width="80">
            </el-table-column>
            <el-table-column
                prop="deductionAmount"
                label="积分抵扣金额（元）"
                width="80">
            </el-table-column>
            <el-table-column
                prop="buyNum"
                label="购买数量"
                width="80">
            </el-table-column>
            <el-table-column
                prop="actualPay"
                label="实际支付金额（元）"
                width="80">
            </el-table-column>
            <el-table-column
                label="创建时间"
                width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="orderState"
                label="订单状态"
                width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.orderState === 1" style="color: #909399">待支付</span>
                <span v-if="scope.row.orderState === 2" style="color: #F56C6C">待发货</span>
                <span v-if="scope.row.orderState === 3" style="color: #67C23A">已发货</span>
                <span v-if="scope.row.orderState === 4" style="color: #67C23A">订单已完成</span>
                <span v-if="scope.row.orderState === 5" style="color: #E6A23C">售后处理中</span>
                <span v-if="scope.row.orderState === 6" style="color: #67C23A">售后已完成</span>
                <span v-if="scope.row.orderState === 7" style="color: #909399">已取消</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作">
              <template slot-scope="scope">
                  <el-link type="primary" @click="queryDetails(scope.row)">详情</el-link>
                  <el-link v-if="scope.row.orderState === 2" type="warning" @click="sendGoods(scope.row)" style="margin-left: 10px">发货</el-link>
                  <el-link v-if="scope.row.orderState === 7" type="danger" @click="deleteOrder(scope.row.id)" style="margin-left: 10px">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!--分页部分-->
    <el-row type="flex" justify="center" class="el-row" style="margin-top: 30px">
      <el-col :span="24">
        <el-pagination
            background
            layout="prev,sizes, pager, next,total,jumper"
            :page-sizes="[1, 5, 10]"
            @next-click="nextPage"
            @prev-click="prevPage"
            @size-change="sizeChange"
            @current-change="currentPage"

            :page-size="pageOrderData.pageSize"
            :current-page="pageOrderData.pageNum"
            :total="pageOrderData.total"
            :page-count="pageOrderData.pages">
        </el-pagination>
      </el-col>
    </el-row>

    <!--详情部分-->
    <el-dialog :title="title" :visible.sync="orderIsVisiable" :modal="false">
      <div>
        <div style="float: left">
          <el-card :body-style="{ padding: '20px' }" >
          </el-card>
        </div>
      <el-form :model="rowData">
          <el-steps :active="rowData.active" finish-status="success" simple style="margin-top: 20px">
            <el-step title="提交订单" ></el-step>
            <el-step title="付款成功" ></el-step>
            <el-step title="已经发货" ></el-step>
            <el-step title="确认收货" ></el-step>
            <el-step title="申请售后" ></el-step>
            <el-step title="售后完成" ></el-step>
          </el-steps>
        <el-form-item :label-width="formLabelWidth" v-if="false">
          <span v-model="rowData.orderId"></span>
        </el-form-item>
        <el-form-item label="发货人员:" :label-width="formLabelWidth" v-if="rowData.orderState!=1 && rowData.orderState!=2" style="margin-top: 40px">
          <el-input v-model="rowData.account" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="发货时间:" :label-width="formLabelWidth" v-if="rowData.orderState!=1 && rowData.orderState!=2" style="margin-top: 40px">
          <el-input v-model="rowData.sendTime" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <h1>订单编号 : {{rowData.orderNum}}</h1>
        <el-button @click="orderIsVisiable = false">取 消</el-button>
        <el-button :disabled="rowData.orderState == 5 || rowData.orderState == 6 ? false : true" type="primary" @click="jumpToServices">跳转到售后页面</el-button>
      </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "ordermanager",
  data(){
    return{
      orders:{
        id:'',
        buyNum:'',
        actualPay:'',
        createTime:'',
        orderState:'',
        account:'',
        orderId:'',
        sendTime:'',
        orderNum:''
      },
      //分页相关
      pageOrderData:{
        list:'',
        total:'',
        pageNum:1,
        pageSize:5,
        pages:''
      },
      //查询相关
      check:{
        goodName:'',
        orderNum:'',
        orderState:'',
        account:''
      },
      //详情页面
      rowData:{
        account:'',
        orderId:'',
        sendTime:'',
        active:'',
        orderState:'',
        orderNum:''
      },
      //订单详情弹窗是否可视
      orderIsVisiable:false,
      formLabelWidth: '120px',
      title:'订单详情',
      rules:{
        goodName: [
          { message: '商品名称', trigger: 'blur' }
        ],
        orderNum: [
          {  message: '订单编号', trigger: 'blur' }
        ],
        orderState: [
          {message: '请选择订单状态', trigger: 'change' }
        ]
      },
    }
  },
  methods:{
    selectEnable(row, rowIndex){
      // console.log(row);
      // console.log(rowIndex);
      if (row.orderState != 7) {
        return false;
      }else {
        return true;
      }
    },
    queryOrders(){
      let jwt=localStorage.getItem("jwt");
      var url = '/api/orders/orderList?goodName=' + this.check.goodName + '&orderNum=' + this.check.orderNum + '&orderState=' + this.check.orderState +'&account=' + this.check.account + '&pageNum=' + this.pageOrderData.pageNum + '&pageSize=' + this.pageOrderData.pageSize;
      console.log(url);
      this.$axios.get(url,{headers:{"jwt":jwt}})
          .then(response =>{
            // console.log(response.data);

            if(response.data.code==200){
              this.pageOrderData=response.data.data;
              // console.log(this.pageOrderData);
            }else {
              this.pageOrderData.list=null;
              this.pageOrderData.pages=0;
              this.pageOrderData.total=0;
              this.pageOrderData.pageNum=1;
              this.pageOrderData.pageSize=5;
              this.$message.warning(response.data.msg);
            }
          });
    },
    handleSelectionChange(val){
      this.multipleSelection=val;
    },
    nextPage(pageNum){
      this.pageOrderData.pageNum=pageNum;
    },
    prevPage(pageNum){
      this.pageOrderData.pageNum=pageNum;
    },
    currentPage(pageNum){
      this.pageOrderData.pageNum=pageNum;
      this.queryOrders();
    },
    sizeChange(size){
      this.pageOrderData.pageSize=size;
      if (this.pageOrderData.pageNum!=1){
        this.pageOrderData.pageNum=1;
      }else{
        this.queryOrders();
      }
    },
    doReset(check){
      this.$refs[check].resetFields();
      this.pageOrderData.pageSize=5;
      this.pageOrderData.pageNum=1;
      this.queryOrders();
    },
    queryDetails(row){
      let jwt=localStorage.getItem("jwt");
      this.rowData.orderState=row.orderState;
      if(row.orderState == 7){
        this.$alert('该订单已取消', '订单详情', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }else{
        this.orderIsVisiable=true;
        this.rowData.active=row.orderState;
        this.$axios.get('api/orders/orderDetails?orderId='+row.id,{headers:{'jwt':jwt}}).then(response =>{
          console.log(response.data.data);
          if(response.data.data.account != null && response.data.data.sendTime != null){
            this.rowData.orderId=row.id;
            this.rowData.orderNum=row.orderNum;
            this.rowData.account=response.data.data.account;
            this.rowData.sendTime=response.data.data.sendTime;
          }
        })
      }

   },
    sendGoods(row){
      let jwt=localStorage.getItem("jwt");
      this.orders.actualPay=row.actualPay;
      this.orders.orderState=3;
      this.orders.buyNum=row.buyNum;
      this.orders.id=row.id;
      this.orders.orderNum=row.orderNum;
      this.orders.createTime=row.createTime;
      // this.orders.sendTime=row.sendTime;
      this.orders.account=sessionStorage.getItem("account");
      console.log(this.orders);
      this.$axios.post('api/orders/orderUpdate',this.orders,{headers:{'jwt':jwt}}).then(response =>{
        if(response.data.code==200){
          this.$axios.post('api/orders/orderDetailsAdd',this.orders,{headers:{"jwt":jwt}}).then(resp =>{
            if(resp.data.code==200){
              this.$message.success("已成功发货");
            }else{
              this.$message.error("当前管理员操作未成功,请查看后台数据");
            }
          })
        }else {
          this.$message.error("操作失败,请重试");
        }
        this.queryOrders();
      })
    },
    jumpToServices(){
      sessionStorage.setItem("orderNum",this.rowData.orderNum);
      this.$router.push("servicemanager");
    },
    deleteOrder(id){
      let jwt=localStorage.getItem("jwt");
      this.$axios.get('api/orders/orderDelete?id='+id,{headers:{"jwt":jwt}}).then(response => {
        if(response.data.code==200){
          this.$message.success("已成功删除");
          this.queryOrders();
        }else{
          this.$message.error("操作失败,请重试");
        }
      });
    },
    batchDelete(){
      this.$confirm('是否删除?','提示',{
        confirmButtonText:'确定',
        cancelButtonClass:'取消',
        type:'warning'
      }).then(() =>{
        //确定
        let selectval = this.multipleSelection;
        let ids = [];
          selectval.forEach(e => {
              ids.push(e.id);
          });
        if(ids.length!=0){
          // console.log(ids);
          let jwt = localStorage.getItem("jwt");
          this.$axios.post('api/orders/batchDelete',ids,{headers:{'jwt':jwt}
          }).then(response =>{
            if(response.data.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.doReset('check');
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })
        }
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created:function () {
      this.queryOrders();
  }
}
</script>

<style scoped>

</style>